<!--
 * @description  :许可证号列表
 * @descriptionDetail:许可证号列表
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-08 10:57:44
-->
<template>
  <view class="page case-bg">
    <!-- 许可证选择弹框-->
    <view class="zk-popup-content">
      <scroll-view scroll-y="true" style="height: 500rpx;">
        <view class="zk-lic-box">
          <view class="zk-lic-title u-border-bottom">
            许可证号
          </view>
          <view :class="[index==licInfo.length-1?'':'u-border-bottom']" v-for="(item, index) in licInfo" :key="index">
            <u-checkbox-group
              :wrap="wrapIsTrue"
              size="44"
              :label-disabled="labelDisabled"
              class="zk-lic-list"
              @change="checkboxGroupChange"
            >
              <u-checkbox
                :name="item.licNo"
                icon-size="24"
                class="zk-radio-item"
                :key="index"
                v-model="item.checked"
                @change="checkboxChange"
              >
                <view class="zk-radio-label">
                  <text class="zk-radio-name">
                    {{ item.entName }}
                  </text>
                  <text class="zk-radio-num">
                    {{ item.licNo }}
                  </text>
                </view>
              </u-checkbox>
            </u-checkbox-group>
          </view>
          <u-loadmore :status="status" :style="{marginTop: marginTop}" v-if="licInfo.length == 0" />
        </view>
      </scroll-view>
      <view class="zk-confrim-btn" v-if="licInfo.length > 0">
        <u-button type="primary" @click="confirm">
          确定
        </u-button>
      </view>
    </view>
  </view>
</template>

<script>
import util from "@/common/util.js"; // 引用公共函数

export default {
  name:"SelectLic",
  // 引用组件 uview的组件不需要注册,已经全局注册过,可直接使用
  // 自定义组件必须 import 再注册components 才可以在template 中引用
  components: {

  },
  props: {
    confirmBackLic: {
      type: Function,
      default: function(index) {},
    },
    showLic: {
      type: String,
      default: () => "", // 回显许可证号码
    },
    initParams:{
      type:Object,
      default:() => {}, // 查询许可证接口参数
    },
  },
  data() {
    return {
      status: 'nomore', // 无数据状态
      marginTop: '5px',
      checkboxValue: '',
      wrapIsTrue: true, // 是否一行显示
      labelDisabled: true,
      licInfo: [],
      returnLicList:[],
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
    // 获取许可证信息
    let self = this;
    this.getSelectLic(self.initParams);
  },
  methods: {
    init: function() {
      // 初始化数据 比如调用初始化加载数据
    },
    getSelectLic(applyType) {
      this.licInfo = [{
        licNo:"320601100044",
        entName:"华娜超市",
        businessAddr:"达拉特旗树林召镇营盘村",
      },{
        licNo:"320601100045",
        entName:"华联商场",
        businessAddr:"达拉特旗树林召镇营盘村1",
      },]
    },
    // 选中某个复选框时，由checkbox时触发
    checkboxChange(e) {
      // console.log(e);
      if (e) {
        this.licInfo.filter((item, index) => {
          if (item.licNo === e.name) {
            if(e.value){
              this.returnLicList.push(item);
            }else{
              this.returnLicList.splice(index,1);
            }
          }
          // item.checked = e.value;
        });
      }
      console.log(this.licInfo);
    },
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) {
      // console.log(e);
    },
    confirm: function() {
      this.confirmBackLic(this.returnLicList)
    },
  },
  // 加载初始周期方法
  onLoad() {
    this.init();
  },
}
</script>

<style lang="scss">
.zk-popup-content {
		width: 90%;
		margin: auto;

		.zk-confrim-btn {
				// position: relative;
				// bottom: -18px;
		}

		.zk-lic-box {
				.zk-lic-title {
						font-size: 36rpx;
						font-weight: bold;
						color: #171819;
						padding: 34rpx 0;
				}

				.zk-lic-list {
						padding: 10px 0;

						.zk-radio-item {
								height: 128rpx;

								.zk-radio-label {
										display: flex;
										flex-direction: column;
										margin-left: 20rpx;

										.zk-radio-name {
												color: #171819;
												font-size: 32rpx;
												font-weight: bold;
										}

										.zk-radio-num {
												font-size: 28rpx;
												color: #9AA0A3;
										}
								}
						}
				}

		}
}
</style>
